<template>
    <div class="ball" :style="{width: props.width, height: props.height}"></div>
</template>

<script setup lang="ts">
const props = defineProps({
    width: {
        type: String,
        default: '50%',
    },
    height: {
        type: String,
        default: '50%',
    }
})
</script>

<style scoped lang="scss">
.ball {
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(18% 28% at 24% 50%, #cefAFFFF 7%, #073AFF00 100%),
  radial-gradient(18% 28% at 18% 71%, #fffFFF59 6%, #073AFF00 100%),
  radial-gradient(70% 53% at 36% 76%, #73f2FFFF 0, #073AFF00 100%),
  radial-gradient(42% 53% at 15% 94%, #fffFFFFF 7%, #073AFF00 100%),
  radial-gradient(42% 53% at 34% 72%, #fffFFFFF 7%, #073AFF00 100%),
  radial-gradient(18% 28% at 35% 87%, #fffFFFFF 7%, #073AFF00 100%),
  radial-gradient(31% 43% at 7% 98%, #fffFFFFF 24%, #073AFF00 100%),
  radial-gradient(21% 37% at 72% 23%, #d3fF6D9C 24%, #073AFF00 100%),
  radial-gradient(35% 56% at 91% 74%, #8a4FFFF5 9%, #073AFF00 100%),
  radial-gradient(74% 86% at 67% 38%, #6dfFAEF5 24%, #073AFF00 100%),
  linear-gradient(125deg, #4eb5FFFF 1%, #4c00FCFF 100%);
  animation: rotate 10s infinite linear;
  box-shadow: 0 0 0.1rem 0.05rem var(--comment-white-color) inset, 0 0 0.2rem 0.02rem var(--box-shadow);
}

@keyframes rotate {
  to {
    transform: rotatez(360deg);
  }
}
</style>